<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common_head :: commonHead(${loginTitle})"></head>
<body>

<el-container id="app" v-cloak>
    <el-main>
        <el-row type="flex" justify="center">
            <el-col :xs="24" :sm="20" :md="16" :lg="12">
                <!-- 登录 -->
                <transition name="el-fade-in-linear" appear>
                    <el-card class="opaque">
                        <el-row type="flex" justify="center">
                            <el-col :xs="24" :sm="20" :md="16" :lg="12">
                                <div style="text-align: center">
                                    <h4 class="title" th:text="${loginTitle}"></h4>
                                </div>
                                <el-form :model="user" status-icon>
                                    <el-form-item prop="username">
                                        <el-input v-model="user.username" @keydown.enter.native="login" placeholder="用户名" autofocus></el-input>
                                    </el-form-item>
                                    <el-form-item prop="password">
                                        <el-input type="password" v-model="user.password" placeholder="密码" @keydown.enter.native="login"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="login" :loading="buttonLoading" style="width: 100%;">{{ buttonLoading ? '登录中...' : '登录' }}</el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <div style="text-align: center" th:utext="${loginFooter}"></div>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                    </el-card>
                </transition>
            </el-col>
        </el-row>
    </el-main>
</el-container>

<div th:include="common/common_js :: commonJs"></div>
<script src="/res/js/login.js"></script>
</body>
</html>